<!-- 页面 -->
<template>
    <div>
        list
        <h1>list</h1>
        {{ aa.name }}
        {{ aa.age }}
        {{ aa.obj.num }}  <br>

        {{ zs }}
        <button @click="zs++">点击加一</button>
        <button @click="zs--">点击减一</button>
        <button @click="text()">二大爷</button>
    </div>
</template>
<!--vue -->
<script>
import {ref,reactive} from 'vue'
export default {
    // name:'张三',
    
    setup(){
        let zs = ref(0)
        let aa = reactive({
            name:'李四',
            age:105,
            // zs:0,
            obj:{
                num:"三大爷"
            }
        })
        function text(){
           aa.name='张是'
           aa.age=111
           aa.obj.num='四大爷'
        }
        return{
            // name
            aa,
            text,
            zs

        }
    }
}
</script>
<!-- css样式 -->
<style></style>